<template>
  <v-col class="media-column" :cols="props.cols">
    <Banner class="container" v-if="isAd" :item="item" fit="contain"></Banner>
    <Link
      v-else
      class="pa-0 ma-0 container"
      :href="href"
      :title="item.content"
      v-on="{ click: [emitBounding, emitToggleSelected] }"
    >
      <div v-if="selectorMode" v-show="isSelected" class="selected">
        <button class="d-flex justify-center align-center">
          <Icon size="20" name="yesSelected"></Icon>
        </button>
      </div>
      <EncryptImage
        v-if="props.item.slice === VIDEO_SLICE_STATUS.SUCCESS"
        :src="item[isLock ? 'img_path_blur_mini' : 'img_path_mini']"
        :border-radius="10"
        object-fit="cover"
      ></EncryptImage>
      <div v-if="isLock">
        <div class="mask"></div>
        <div
          v-if="props.item.slice === VIDEO_SLICE_STATUS.FAILURE"
          class="lock d-flex justify-center align-center font-size-14 font-weight-500 lien-height-140 text-primary"
        >
          {{ $t('content.videoSliceFail') }}
        </div>
        <div
          v-else-if="[VIDEO_SLICE_STATUS.PENDING, VIDEO_SLICE_STATUS.SLICING].includes(props.item.slice)"
          class="lock d-flex justify-center align-center font-size-14 font-weight-500 lien-height-140"
        >
          {{ $t('content.videoSlicing') }}
        </div>
        <div
          v-else-if="props.item.need_buy || props.item.visible === FEED_PERMISION.SHOP"
          class="lock d-flex justify-center align-center"
        >
          <div class="text-white font-size-16 font-style-normal font-weight-500 line-height-100">$</div>
          <div class="text-white font-size-26 font-style-normal font-weight-500 line-height-100">
            {{ props.item.money.toFixed(2) }}
          </div>
        </div>
        <div
          v-else-if="props.item.need_subscribe || props.item.visible === FEED_PERMISION.SUB"
          class="lock d-flex justify-center align-center"
        >
          <Icon size="54" name="lock2"></Icon>
        </div>
      </div>
      <div v-else-if="scheduled">
        <div
          v-if="scheduled"
          class="lock d-flex justify-center align-center font-size-14 font-weight-500 lien-height-140 text-center"
        >
          {{ $t('info.autoPublishAt', [props.item.display_at]) }}
        </div>
        <div class="mask scheduled"></div>
      </div>
      <div v-if="topRightIcon" class="top-right d-flex justify-center align-center">
        <Icon :name="topRightIcon" size="12"></Icon>
      </div>
      <div class="bottom" :class="{ 'no-gradient': isLock }">
        <div class="video-info" :class="{ between: isVideo }">
          <div v-if="isVideo" class="duration font-size-10 font-weight-400 line-height-120">{{ transDuration }}</div>
          <div v-if="!scheduled" class="watches font-size-10 font-weight-400 line-height-120">
            <span v-if="props.item.visible === FEED_PERMISION.ALL" class="d-flex justify-center align-center gap-row-2">
              <Icon name="eye" size="10"></Icon>
              <span>{{ transformWatches }}</span>
            </span>
          </div>
          <div v-else class="watches font-size-10 font-weight-400 line-height-120">
            <span v-if="props.item.visible === FEED_PERMISION.ALL">
              <Icon name="global" size="10"></Icon>
              {{ $t('common.everyone') }}
            </span>
            <span v-if="props.item.visible === FEED_PERMISION.SUB">
              <Icon name="user" size="10"></Icon>
              {{ $t('common.subscriber') }}
            </span>
            <span v-if="props.item.visible === FEED_PERMISION.SHOP">
              {{ `$ ${props.item.money}` }}
            </span>
          </div>
        </div>
      </div>
    </Link>
  </v-col>
</template>
<script setup>
import { computed, defineProps, inject, ref, watch } from 'vue'
import { VCol } from 'vuetify/components'
import { repairZero, toKMBTString } from '@/utils/string-helper'
import Banner from '@/components/banner/Banner.vue'
import Link from '@/components/common/Link.vue'
import EncryptImage from '@/components/multimedia/EncryptImage.vue'
import { AD_TYPE, FEED_PERMISION } from '@/constant'
import { MEDIA_TYPE, VIDEO_SLICE_STATUS } from '@/constant/publish'

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
  cols: {
    type: Number,
    required: true,
  },
  previewMode: {
    type: Boolean,
    default: false,
  },
  previewVisitor: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['bounding', 'selected'])

const isAd = computed(() => props.item.type === AD_TYPE.VIDEO || props.item.type === AD_TYPE.PHOTO)

const transformWatches = computed(() => toKMBTString(props.item.click, 2))
const transDuration = computed(() => {
  if (!props.item.video_time) return '00:00'
  return `${repairZero(parseInt(props.item.video_time / 60))}:${repairZero(props.item.video_time % 60)}`
})
const isVideo = computed(() => props.item.type === MEDIA_TYPE.VIDEO)
const isPhoto = computed(() => props.item.type === MEDIA_TYPE.IMAGE)

const href = ref(createHref())
watch(
  () => props.item,
  () => {
    href.value = createHref()
  },
)
function createHref() {
  if (props.item.author) {
    if (props.item.type === MEDIA_TYPE.VIDEO) {
      return `/@${props.item.author.username}/video/${props.item.id}`
    }
    if (props.item.type === MEDIA_TYPE.IMAGE) {
      return `/@${props.item.author.username}/photo/${props.item.id}`
    }
  }
  return '/@'
}

/**
 * 1. 如果是尚未購買的媒體
 * 2. 如果是尚未訂閱的媒體
 * 3. 如果是不能播放的媒體
 * 4. 如果是訂閱者預覽模式，且媒體的權限是商店
 * 5. 如果是遊客預覽模式，且媒體的權限是訂閱
 * 6. 如果是影片尚未處理完成
 */
const isLock = computed(
  () =>
    props.item.need_buy ||
    props.item.need_subscribe ||
    (props.item.can_play !== undefined && !props.item.can_play) ||
    (props.previewMode && props.item.visible === FEED_PERMISION.SHOP) ||
    (props.previewVisitor && props.item.visible === FEED_PERMISION.SUB) ||
    props.item.slice !== VIDEO_SLICE_STATUS.SUCCESS,
)

const topRightIcon = computed(() => {
  if (isVideo.value) {
    return 'video'
  }
  if (isPhoto.value) {
    if (!props.item.img_more) {
      return 'singlePhoto'
    } else {
      return 'multiPhoto'
    }
  }
  return ''
})

// 發送此 column 當前的 BoundingRect
// 上層有需要的話必須 provide('enableEmitBounding', true)

const enableEmitBounding = inject('enableEmitBounding', false)

function emitBounding(evt) {
  if (!enableEmitBounding) return

  let target = evt.target
  while (!target.classList.contains('container')) {
    target = target.parentNode
  }

  const { x, y, width, height } = target.getBoundingClientRect()
  console.log('emitBounding', { x, y, width, height })
  emits('bounding', { x, y, width, height })
}

const selectorMode = inject('selectorMode', false)
const selectedItems = inject('selectedItems', null)
const scheduled = inject('scheduled', false)

const isSelected = computed(() => {
  return selectedItems.value.find((item) => item.id === props.item.id)
})

const emitToggleSelected = () => {
  if (!selectorMode) return
  emits('selected', props.item)
}
</script>
<style scoped lang="scss">
.media-column {
  .container {
    height: 10.3125rem;
    border-radius: 0.625rem;
    position: relative;

    .mask {
      height: 100%;
      width: 100%;
      border-radius: 0.625rem;
      background: linear-gradient(180deg, rgba(249, 94, 14, 0.2) 0%, rgba(231, 23, 179, 0.2) 100%);
      position: absolute;
      top: 0;

      &.scheduled {
        background: rgba(24, 25, 37, 0.4);
        backdrop-filter: none;
      }
    }
  }

  .top-right {
    width: 1rem;
    height: 1rem;
    border-radius: 0.5rem;
    background: rgba(var(--v-theme-background), 0.4);
    position: absolute;
    top: 0.3125rem;
    right: 0.3125rem;
  }

  .bottom {
    width: 100%;
    border-bottom-left-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem;
    background: linear-gradient(180deg, rgba(57, 57, 57, 0) 0%, rgb(0, 0, 0, 0.6) 100%);
    position: absolute;
    bottom: 0;

    &.no-gradient {
      background: none;
    }

    .video-info {
      padding: 0.25rem 0.5rem;
      color: white;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      &.between {
        display: flex;
        justify-content: space-between;
      }

      .duration,
      .watches {
        font-family: 'PingFang SC';
      }
    }
  }

  .lock {
    height: 100%;
    width: 100%;
    border-radius: 0.625rem;
    position: absolute;
    top: 0;
  }

  .selected {
    position: absolute;
    right: 0;
    margin: 5px;
  }
}
</style>
